<template>
	<view style="padding-bottom: 40rpx;">
		<view :style="{ padding: '10px 10px 0px 20px', background: list.BgColor }">
			<u-tabs
				:list="cateList"
				height="60"
				duration="0"
				name="cate_name"
				:is-scroll="true"
				:show-bar="list.Style == 'Two' ? false : true"
				:inactive-color="list.FontColor"
				:active-color="list.Style == 'Two' ? list.SelectColor : list.LineColor"
				:active-item-style="list.Style == 'Two' ? list.Two : ''"
				:current="current"
				@change="TabsChange"
			></u-tabs>
		</view>
		<view style="background: #fff;">
			<u-grid :col="list.tabType" :border="false" align="center">
				<view style="padding: 0 12rpx;">
					<u-grid-item :custom-style="{ padding: 0 }" v-for="(item, index) in GoodsList" :key="index" @click="GoodsDetail(item, index)">
						<view :class="[list.tabType == 1 ? 'GoodsOne' : list.tabType != 3 ? 'GoodsTwo' : 'GoodsTree']">
							<view :class="[list.tabType == 1 ? 'GoodsOneImg' : list.tabType != 3 ? 'GoodsTwoImg' : 'GoodsTreeImg']"><image :src="item.main_imgurl"></image></view>
							<view class="GoodsTwoMain">
								<view :class="['GoodsTwoTitle', list.tabType != 3 ? 'TextAuto' : 'TextTreeAuto']">{{ item.product_title }}</view>
								<view v-if="list.options.volumeStr" class="GoodsNum">已有{{ item.volume }}人购买</view>
								<view :class="[list.tabType == 3 ? 'GoodsTreePirce' : list.tabType == 2 ? 'GoodsTwoPirce' : 'GoodsPirce']">
									<text class="GoodsSize">￥</text>
									<text>{{ item.price }}</text>
									<text
										v-if="list.options.originalPrice"
										:class="[list.tabType == 3 ? 'GoodsTreeOldPirce' : list.tabType == 2 ? 'GoodsTwoOldPirce' : 'GoodsOldPirce']"
									>
										￥{{ item.primary_price }}
									</text>
								</view>
							</view>
						</view>
					</u-grid-item>
				</view>
			</u-grid>
			<view style="flex: 1;" v-if="GoodsList.length > 2"><u-loadmore :status="loadStatus"></u-loadmore></view>
		</view>
	</view>
</template>
<script>
import $HTTPS from '@/service/DIY.js';
export default {
	name: '',
	components: {},
	data() {
		return {
			style: 1,
			current: 0,
			current_id: null,
			list: {},
			cateList: [],
			GoodsList: [],
			Two: { background: '#E6B738', 'border-radius': '60px' },
			page: this.value,
			loadStatus: 'loadmore'
		};
	},
	props: {
		// 当前页
		value: {
			type: Number
		},
		storeId: {
			type: Number, //校验类型
			default: 0
		},
		keyword: {
			type: String, //校验类型
			default: ''
		},
		config: {
			type: Object //校验类型
			// default: ''
		}
	},
	computed: {},
	watch: {
		value(val) {
			// console.log(val);
			this.page = val;
			this.ReachGoodsList();
		},
		keyword(val) {
			// console.log(val);
			this.GetGoodsList();
		}
	},
	created() {},
	mounted() {
		var that = this;
		let Two = { background: that.config.BgCurrentColor, 'border-radius': '60px' };
		that.$set(that.config, 'Two', Two);
		that.list = that.config;
		// console.log(this.config);
		that.LeftClassList();
	},
	methods: {
		TabsChange(row) {
			var that = this
			that.current = row;
			that.current_id = that.cateList[row].cate_id;
			that.page = 1;
			that.$emit('GoodsPage', 1);
			that.GetGoodsList();
		},
		GoodsDetail(row, index) {
			var that = this;
			// console.log(row);
			uni.navigateTo({
				url: `/pages_mall/pages/mall/goods_details/goods_details?id=${row.product_id}`
			});
		},
		LeftClassList() {
			var that = this;
			$HTTPS
				.GetStoreClass({
					store_id: that.storeId
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						let currentID = data[0].cate_id;
						that.cateList = data;
						that.current_id = currentID;
						that.GetGoodsList();
					}
				})
				.catch(err => {});
		},
		ReachGoodsList() {
			var that = this;
			// that.page++;
			that.loadStatus = 'loading';
			uni.showLoading({
				title: '加载中...'
			});
			$HTTPS
				.GetStoreGoods({
					store_id: that.storeId,
					cate_id: that.current_id,
					page: that.page,
					keyword: that.keyword
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						if (!res.data.length) {
							that.loadStatus = 'nomore';
							return;
						} else {
							that.loadStatus = 'loadmore';
						}
						that.StaffList = that.StaffList.concat(data);
						// that.GoodsList = data.data;
					}
				})
				.catch(err => {});
			setTimeout(() => {
				uni.hideLoading();
			}, 500);
		},
		GetGoodsList() {
			var that = this;
			$HTTPS
				.GetStoreGoods({
					store_id: that.storeId,
					cate_id: that.current_id,
					page: that.page,
					keyword: that.keyword
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						// console.log(data);
						that.GoodsList = data.data;
					}
				})
				.catch(err => {});
		}
	}
};
</script>
<style lang="less" scoped>
.TextAuto {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.TextTreeAuto {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.GoodsOne {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 10rpx 32rpx;
	background: #fff;
	border-bottom: 1px solid #f5f5f5;
	.GoodsOneImg {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
}
.GoodsTwo {
	width: 333rpx;
	background: #fff;
	padding: 15rpx 0;
	.GoodsTwoImg {
		width: 333rpx;
		height: 333rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
}
.GoodsTree {
	width: 214rpx;
	background: #fff;
	padding: 15rpx 0;
	.GoodsTreeImg {
		width: 214rpx;
		height: 214rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
}

.GoodsTwoMain {
	margin-top: 22rpx;
	padding: 0 10rpx;
	flex: 1;
	.GoodsTwoTitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #212121;
	}
	.GoodsNum {
		font-size: 22rpx;
		font-weight: 500;
		color: #c68c57;
		padding: 10rpx 0;
		padding: 10rpx;
		margin: 10rpx 0;
		background: rgba(207, 166, 128, 0.1);
		width: max-content;
		border-radius: 4px;
	}
	.GoodsPirce {
		font-size: 36rpx;
		font-weight: bold;
		color: #f66036;
		margin-top: 44rpx;
		.GoodsSize {
			font-size: 22rpx;
			color: #f66036;
			margin-right: 4rpx;
		}
		.GoodsOldPirce {
			font-size: 24rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #929290;
			margin-left: 20rpx;
		}
	}
	.GoodsTwoPirce {
		font-size: 36rpx;
		font-weight: bold;
		color: #f66036;
		margin-top: 10rpx;
		.GoodsSize {
			font-size: 22rpx;
			color: #f66036;
			margin-right: 4rpx;
		}
		.GoodsTwoOldPirce {
			font-size: 24rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #929290;
			margin-left: 20rpx;
		}
	}
	.GoodsTreePirce {
		font-size: 36rpx;
		font-weight: bold;
		color: #f66036;
		margin-top: 10rpx;
		.GoodsSize {
			font-size: 22rpx;
			color: #f66036;
			margin-right: 4rpx;
		}
		.GoodsTreeOldPirce {
			font-size: 24rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #929290;
			display: block;
		}
	}
}
</style>
